<template>
	<div class="layout-padding">
		<el-tabs
			v-model="activeName"
			type="border-card"
			class="card-tabs h-full"
			@tab-click="handleClick"
			style="height: 100%; width: 100%; display: flex; flex-direction: column"
		>
			<el-tab-pane :label="$t('step.stepSearch')" name="first" class="h-full">
				<div class="layout-padding-auto">
					<el-form :model="state.queryForm" ref="queryRef" :inline="true">
						<el-form-item :label="$t('step.stepinTime')" prop="stepinTime">
							<div class="block">
								<el-date-picker
									v-model="stepinTime"
									clearable
									type="daterange"
									unlink-panels
									range-separator="To"
									start-placeholder="Start date"
									end-placeholder="End date"
									:shortcuts="shortcuts"
								/>
							</div>
						</el-form-item>

						<el-form-item :label="$t('step.stepoutTime')" prop="stepoutTime">
							<div class="block">
								<el-date-picker
									v-model="stepoutTime"
									clearable
									type="daterange"
									unlink-panels
									range-separator="To"
									start-placeholder="Start date"
									end-placeholder="End date"
									:shortcuts="shortcuts"
								/>
							</div>
						</el-form-item>

						<el-form-item :label="$t('step.materialCode')" prop="materialCode">
							<el-input v-model="state.queryForm.materialCode" clearable :placeholder="$t('step.materialCode')" />
						</el-form-item>

						<el-form-item :label="$t('step.stepoutDoc')" prop="stepoutDoc">
							<el-input v-model="state.queryForm.stepoutDoc" clearable :placeholder="$t('step.stepoutDoc')" />
						</el-form-item>

						<el-form-item :label="$t('step.stepinDoc')" prop="stepinDoc">
							<el-input v-model="state.queryForm.stepinDoc" clearable :placeholder="$t('step.stepinDoc')" />
						</el-form-item>

						<el-form-item :label="$t('step.barcode')" prop="barcode">
							<el-input v-model="state.queryForm.barcode" clearable :placeholder="$t('step.barcode')" />
						</el-form-item>

						<el-form-item>
							<el-button type="primary" icon="search" @click="query"> {{ $t('so.query') }}</el-button>
							<el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }} </el-button>
							<el-button type="success" icon="Download" @click="exportTranfers">
								{{ $t('common.exportBtn') }}
							</el-button>
						</el-form-item>
						
					</el-form>
					<el-table
						:data="state.dataList"
						highlight-current-row
						v-loading="state.loading"
						border
						style="width: 100%; height: 100%"
						:cell-style="tableStyle.cellStyle"
						stripe
						:header-cell-style="tableStyle.headerCellStyle"
						ref="tableRef"
					>
						<el-table-column type="index" label="#" width="80" />
						<el-table-column prop="dnDoc" :label="$t('step.dnDoc')" show-overflow-tooltip width="160" />
						<el-table-column prop="stepoutDoc" :label="$t('step.stepoutDoc')" show-overflow-tooltip width="160" />
						<el-table-column prop="stepinDoc" :label="$t('step.stepinDoc')" show-overflow-tooltip width="160" />
						<el-table-column prop="barcode" :label="$t('step.barcode')" show-overflow-tooltip width="140" />
						<el-table-column prop="materialCode" :label="$t('step.materialCode')" show-overflow-tooltip width="120" />
						<el-table-column prop="materialName" :label="$t('step.materialName')" show-overflow-tooltip width="200" />
						<el-table-column prop="materialSpec" :label="$t('step.materialSpec')" show-overflow-tooltip width="200" />
						<el-table-column prop="realBarCodeStatus" :label="$t('step.barcodeStatus')" show-overflow-tooltip width="120">
							<template #default="scope">
								<el-tag>
									{{ scope.row.realBarCodeStatus }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="unit" :label="$t('step.unit')" show-overflow-tooltip />
						<el-table-column prop="lvtStepoutInitQty" :label="$t('step.stepoutInitQty')" show-overflow-tooltip width="140">
							<template #default="scope">
								<el-tag type="success" effect="dark">
									{{ scope.row.lvtStepoutInitQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="lvtLossQty" :label="$t('step.lossQty')" show-overflow-tooltip width="100">
							<template #default="scope">
								<el-tag type="primary" effect="dark">
									{{ scope.row.lvtLossQty == null ? 0 : scope.row.lvtLossQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="lvtStepinQty" :label="$t('step.stepinQty')" show-overflow-tooltip width="140">
							<template #default="scope">
								<el-tag type="danger" effect="dark">
									{{ scope.row.lvtStepinQty == null ? 0 : scope.row.lvtStepinQty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="isStepin" :label="$t('step.isStepin')" show-overflow-tooltip width="120">
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isStepin === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateConsume === 'Y' ? 'dark' : 'light'">
									{{ scope.row.isStepin }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="isFeeding" :label="$t('step.isFeeding')" show-overflow-tooltip width="100">
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isFeeding === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateConsume === 'Y' ? 'dark' : 'light'">
									{{ scope.row.isFeeding }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="feedingTime" :label="$t('step.feedingTime')" show-overflow-tooltip width="200" />
						<el-table-column prop="isPackage" :label="$t('step.isPackage')" show-overflow-tooltip width="100">
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isPackage === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateConsume === 'Y' ? 'dark' : 'light'">
									{{ scope.row.isPackage }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="packageTime" :label="$t('step.packageTime')" show-overflow-tooltip width="200" />
						<el-table-column prop="isOutstock" :label="$t('step.isOutstock')" show-overflow-tooltip width="100">
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isOutstock === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateConsume === 'Y' ? 'dark' : 'light'">
									{{ scope.row.isOutstock }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="outstockTime" :label="$t('step.outstockTime')" show-overflow-tooltip width="200" />
						<el-table-column prop="stepinTime" :label="$t('step.stepinTime')" show-overflow-tooltip width="200" />
						<el-table-column prop="stepoutTime" :label="$t('step.stepoutTime')" show-overflow-tooltip width="200" />
					</el-table>
					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
				</div>
			</el-tab-pane>
			<el-tab-pane :label="$t('step.materialSearch')" name="second" class="h-full">
				<materialList />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { reactive, ref } from 'vue';
import { TabsPaneContext } from 'element-plus';
import { GetStepRecords } from '/@/api/platform/report/step';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
// 引入组件
const materialList = defineAsyncComponent(() => import('./searchBymaterials.vue'));

const activeName = ref('first');
const getYMD = (date: any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const stepinTime = ref([endDate, today]);
const stepoutTime = ref([endDate, today]);
stepinTime.value = null;
// 搜索变量
const queryRef = ref();
const tableRef = ref();
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event);
};

//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		StepinTimeStart: stepinTime.value ? getYMD(stepinTime.value[0]) : '',
		StepinTimeEnd: stepinTime.value ? getYMD(stepinTime.value[1]) : '',
		StepoutTimeStart: stepoutTime.value ? getYMD(stepoutTime.value[0]) : '',
		StepoutTimeEnd: stepoutTime.value ? getYMD(stepoutTime.value[1]) : '',
	},
	pageList: GetStepRecords,
});
// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	stepinTime.value = '';
	stepoutTime.value = '';
	state.queryForm.StepinTimeStart = '';
	state.queryForm.StepinTimeEnd = '';
	state.queryForm.StepoutTimeStart = '';
	state.queryForm.StepoutTimeEnd = '';
	getDataList(false);
};
//搜索
const query = () => {
	state.queryForm.StepinTimeStart = stepinTime.value ? getYMD(stepinTime.value[0]) : '';
	state.queryForm.StepinTimeEnd = stepinTime.value ? getYMD(stepinTime.value[1]) : '';
	state.queryForm.StepoutTimeStart = stepoutTime.value ? getYMD(stepoutTime.value[0]) : '';
	state.queryForm.StepoutTimeEnd = stepoutTime.value ? getYMD(stepoutTime.value[1]) : '';
	getDataList();
};
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);
const exportTranfers = () => {
	downBlobFile('/report/Transfer/ExportStepRecords', 
	{ 
		"StepinTimeStart": state.queryForm.StepinTimeStart, 
		"StepinTimeEnd": state.queryForm.StepinTimeEnd, 
		"StepoutTimeStart": state.queryForm.StepoutTimeStart, 
		"StepoutTimeEnd": state.queryForm.StepoutTimeEnd, 
		"MaterialCode": state.queryForm.MaterialCode, 
		"StepoutDoc": state.queryForm.StepoutDoc, 
		"StepinDoc": state.queryForm.StepinDoc, 
		"Barcode": state.queryForm.Barcode, 
	}, 
	'Tranfers.xlsx');
}
</script>
<style>
/*.card-tabs>.el-tabs__content {
	padding: 2px;
}
.el-tabs__header .is-top{
	height: 40px !important;
}
.el-tabs__content{
	flex: 1;
}*/
</style>
